<template>
	<view class="content">
		<!-- 头部背景图及导航栏 -->
		<view class="contetn-header">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<span>登录</span>
				</view>
			</view>
		</view>
		<!-- 登录内容部分 -->
		<view class="contetn-body">
			<img :src="queryImage(`homelogo13`)" alt="" style="width: 182.07rpx;
height: 94.22rpx;margin-bottom:24rpx;">
			<img :src="userLogoImage(`userlogolist9`)" alt="" style="width: 335rpx;
height: 19.23rpx;">
			<view class="contetn-body-loginbtn" @click="login">
				<img src="../../static/weixinlogo.png" alt="" style="width: 40rpx; height: 40rpx;margin-right: 5rpx;">
				<span>微信账号快捷登录</span>
			</view>
		</view>

		<!-- 阅读接受 -->
		<view class="content-body-check">
			<checkbox-group @change="changecheckout">
				<checkbox style="transform:scale(0.7)" :value="checkeindex" :checked="checkblean" />
			</checkbox-group>

			<span>我已阅读并接受<span class="check-title" @click="gouserdetails">《用户协议》</span>和<span class="check-title"
					@click="goprivacyd">《隐私协议》</span></span>
		</view>
		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="popuplogin">
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatarUrl" class="avatar-img"></image>
				</button>
				<span
					style="font-family: Source Han Sans CN;font-size: 24rpx;font-weight: normal;line-height: 45rpx;">点击选择头像</span>

				<input class="nickname" type="nickname" :value="nickname" @blur="bindblur" placeholder="请输入昵称" />
				<view class="popuplogin-btn" @click="newlogin">
					<span>确认</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import methods from "@/pages/home/methods.js"
	import methodsJS from "@/pages/index/methods.js"
	import {
		mapState
	} from 'vuex'
	import init from "@/store/init/index.js"
	import dataObj from "@/store_config/config_app.js"
	export default {
		data() {
			return {
				userId: '',
				imgId: '',
				show: false,
				nickname: '',
				avatarUrl: '',
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				checkblean: false,
				checkeindex: false,
				optionurl: '/pages/index/index',
				appid: '',
				grant_type: '',
				secret: '',
				openid: ''


			}
		},
		computed: {
			...mapState({
				homelog: state => state.remote?.homelog?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections().then(res=>{
				this.avatarUrl = this.userLogoImage(`userlogolist4`)
			})
		},
		methods: {
			...methods,
			...methodsJS,
			queryImage(label, key = "homelog") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			userLogoImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			
			async up_image_id(data) {
				console.log('---', data.path);
				let imgIds = await this.$store.dispatch("app/upload", {
					method: "uimage",
					isloading: false,
					file: data
				}).then(res => {
					console.log("res.imageId....................", res.imageId)
					return res.imageId
				}).catch(error => {
					console.log('----', error);
				})
				return imgIds
			},
			close() {
				this.show = false
			},
			async onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				let file = {}
				file.path = e.detail.avatarUrl
				this.imgId = await this.up_image_id(file)
				console.log('获取到的头像地址', this.imgId)
			},
			bindblur(e) {
				console.log('获取到的头像地址', e)
				this.nickname = e.detail.value
			},
			newlogin() {
				if (!this.imgId) {
					uni.showToast({
						title: '请选择头像',
						duration: 1000,
						icon: 'error'
					});
					return
				}
				if (!this.nickname) {
					uni.showToast({
						title: '请输入昵称',
						duration: 1000,
						icon: 'error'
					});
					return
				}
				this.show = false
				this.$store.dispatch("remote/mutation", {
					operation: 'update_user',
					where: {
						id: {
							_eq: this.userId
						}
					},
					_set: {
						avatar_id: this.imgId,
						nickname: this.nickname,
						is_answer: '未申请',
						// wx_mini_openid: this.openid,
						system_system: 1
					},
					field_string: 'id is_answer sex wx_mini_openid mobile email nickname avatar{url} avatar_id user_interest{id user_user user_fans_user} background_img{url} profile tag_list attach_data '
				}).then(insertuser => {
					console.log("创建用户成功", insertuser
						.returning[0])
					// 创建用户时创建资产
					this.$store.dispatch("remote/mutation", {
						operation: 'insert_user_assets',
						objects: [{
							user_user: insertuser.returning[0]?.id,
							balance: 0,
							type: 'cny',
							describe: '余额',
							status: '启用'
						}],
					}).then(aaa => {
						console.log("余额资产创建成功")
					})
					// this.$store.dispatch("remote/mutation", {
					// 	operation: 'insert_user_assets',
					// 	objects: [{
					// 		user_user: insertuser.returning[0]?.id,
					// 		balance: 0,
					// 		type: 'cny',
					// 		describe: '答主收益',
					// 		status: '启用'
					// 	}],
					// }).then(aaa => {
					// 	console.log("答主收益资产创建成功")
					// })

					uni.setStorageSync('userInfo', insertuser.returning[0])
					uni.showToast({
						title: '登录成功',
						duration: 1000,
						icon: 'success',
					});
					setTimeout(() => {
						uni.switchTab({
							url: this.optionurl
						})
					}, 1000)


				})
			},
			login() {
				if (this.checkblean) {
					uni.login({
						success: (res) => {
							console.log("获取code", res.code)
							// return
							this.$store.dispatch("remote/callActionflow", {
								actionflow_name: "用户注册登录_wx_mini_openid自动注册登录",
								payload: {
									code_for_wxmini: res.code
								}
							}).then(async res => {
								// let obj = uni.getStorageSync('md_user_token_data')
								// // obj.token=
								// console.log("登录成功99999999999", res.data)
								uni.setStorageSync('md_user_token_data', res.data)
								await init.call(this)
								// return
								dataObj.gql_authorization = res.data.tokenUser.account_token
								console.log("封测十九分快乐人家可是", dataObj.gql_authorization)
								console.log(res.data,'成功了')
								if (res.data?.tokenUser?.avatar) {
									uni.setStorageSync('userInfo', res.data?.tokenUser)
									uni.showToast({
										title: '登录成功',
										duration: 1000,
										icon: 'success',
									});
									setTimeout(() => {
										if(this.optionurl.includes("pages_a")){
											uni.redirectTo({
												url: this.optionurl
											})
										}else{
											uni.switchTab({
												url: this.optionurl
											})
										}
										
									}, 1000)
								} else {
									this.userId = res.data?.tokenUser?.id
									this.show = true
								}
							}).catch(error => {
								console.log("登录失败---------", error)
							})
							// this.$store.dispatch("app/reqZion", {
							// 	method: "query",
							// 	data: {
							// 		model: "operation_lifj2je9",
							// 		isloading: false,
							// 		field_string: "field_200_json{session_key openid}",
							// 		params: {
							// 			"appid": this.appid,
							// 			"secret": this.secret,
							// 			"js_code": res.code,
							// 			"grant_type": this.grant_type
							// 		},
							// 		fz_body: ''
							// 	}
							// }).then(resArr => {
							// 	this.openid = resArr.field_200_json.openid
							// 	console.log(resArr.field_200_json.openid, '11111111111111111111111111')
							// 	if (resArr.field_200_json.openid) {
							// 		//登录成功获取openid查询user表单
							// 		this.$store.dispatch("remote/query", {
							// 			model: "user",
							// 			isloading: false,
							// 			where: {
							// 				wx_mini_openid: {
							// 					_eq: resArr.field_200_json.openid
							// 				}
							// 			},
							// 			field_string: 'id sex wx_mini_openid is_answer mobile email nickname avatar{url} avatar_id user_interest{id user_user user_fans_user} background_img{url} profile tag_list attach_data '
							// 		}).then(resuser => {
							// 			//如果有该用户就获取该用户并存到本地
							// 			console.log("获取到了 数据吗?", resuser)
							// 			if (resuser?.data?.id) {
							// 				console.log("获fsd,mfldm里面死的了马老师吗")
							// 				uni.setStorageSync('userInfo', resuser?.data)
							// 				uni.showToast({
							// 					title: '登录成功',
							// 					duration: 1000,
							// 					icon: 'success',
							// 				});
							// 				setTimeout(() => {
							// 					uni.switchTab({
							// 						url: this
							// 							.optionurl
							// 					})
							// 				}, 1000)
							// 			} else {
							// 				this.show = true

							// 			}
							// 		})

							// 	} else {

							// 	}
							// }).catch(err => {
							// 	console.log("错误信息", err)
							// })
							// console.log('dskjfiedf', res)
						}
					})
				} else {
					uni.showToast({
						title: '请勾选用户须知',
						duration: 2000,
						icon: 'error'
					});
				}
			},
			changecheckout(e) {
				console.log(e.detail.value);
				if (e.detail.value.length > 0) {
					this.checkblean = true
				} else {
					this.checkblean = false
				}
				console.log(this.checkblean);
			},
			gouserdetails() {

			},
			goprivacyd() {

			}
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		onLoad: function(options) {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			if (options?.url) {
				this.optionurl = options?.url
			}
			this.$store.dispatch("remote/query", {
				model: "thirdapi",
				where: {
					id: {
						_eq: 1
					}
				},
				field_string: 'id default_params'
			}).then(res => {
				console.log("获取有用的信息", res.data.default_params)
				this.appid = res.data.default_params.appid
				this.grant_type = res.data.default_params.grant_type
				this.secret = res.data.default_params.secret
			})
			// this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;

		.popuplogin {
			width: 100%;
			height: 600rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 50rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				padding: 0;
				margin: 0;
				display: flex;
				justify-content: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.avatar-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.nickname {
				margin-top: 50rpx;
				text-align: center;
			}

			.popuplogin-btn {
				margin-top: 100rpx;
				width: 200rpx;
				height: 70rpx;
				border-radius: 10rpx;
				text-align: center;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 70rpx;
				color: #fff;
				background-color: #26C789;
			}
		}

		.contetn-header {
			width: 100%;
			height: 495rpx;

			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				position: fixed;
				z-index: 999989;

				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: Source Han Sans CN;
					font-size: 36rpx;
					font-weight: normal;
					line-height: 36rpx;
					text-align: center;
					letter-spacing: 0px;
					color: #000000;
				}

			}
		}

		.contetn-body {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.contetn-body-loginbtn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 455rpx;
				height: 80rpx;
				border-radius: 80rpx;
				font-family: Alibaba PuHuiTi 2.0;
				background: #F09500;
				margin-top: 163rpx;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 40rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
			}
		}

		.content-body-check {
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 500;
			color: #999999;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 50rpx;
			line-height: 40rpx;

			.check-title {
				color: #F09500;
				font-size: 24rpx;
				line-height: 40rpx;
				border-bottom: 2rpx solid #F09500;
			}


		}
	}
</style>